<template>
  <div class="index dis-f jc-sb">
    <div class="w-500">
      <con-box class="h-418" title="工安运行天次">
        <div class="dis-f ac-c jc-c mt-20">
          <div class="w-280 h-244">
            <div class="pic w-270 h-162 po-r">
              <span class="po-a t-40 l-40 w-180 ta-c fw-700 fz-32 font-num scale">
                {{ runningDays }} <span class="fz-18">天</span>
              </span>
              <img src="@/assets/images/aqsc_icon_gz.png" alt="" class="w-100p h-100p" />
            </div>
            <div class="mt-20 h-52 dis-f ai-c fz-18 c-fff bg-item jc-c">
              <span class="w-172">安全生产连续天数</span>
            </div>
          </div>
        </div>
      </con-box>
      <con-box class="h-435 mt-10" title="纠违、隐患及时整改率">
        <base-echarts :options="safeOptions" />
      </con-box>
    </div>
    <div class="flex-1 pl-10 pr-10 dis-f ai-flex-end">
      <con-box class="h-258 w-100p" title="污水处理指标符合指标">
        <base-echarts :options="sewagOptions" />
      </con-box>
    </div>
    <div class="w-500">
      <con-box class="h-497" title="合规性项目符合率">
        <base-echarts :options="hgProjectOptions" />
      </con-box>
      <!-- 废气处理指标符合率 -->
      <con-box class="h-354 mt-10" title="污水臭气浓度">
        <div class="exhaust-gas-treatment-con">
          <img src="@/assets/images/aqsc_icon_fqclzb.png" alt="" class="rotate" />
          <div class="value">
            <span>{{ lampblackRate }}</span>
            <span style="display: block;text-align: center; font-size: 12px;color: #999;">标准&lt;20000</span>
          </div>
        </div>
        <title-item title="污水臭气浓度" />
      </con-box>
    </div>
  </div>
</template>

<script>
// iui

import { safetyRectify, getWorkday, safetyGas, safetyProject, safetyDisposal } from "@/api/apis";

const barDate = [0, 0, 0, 0];
import BaseEcharts from "@/components/BaseEcharts.vue";
import ConBox from "@/components/ConBox.vue";
import * as echarts from "echarts";
import { nowSize } from "@/utils/nowSize";
import TitleItem from "@/components/TitleItem.vue";
import { TOOLTIP_COMMON } from "@/assets/js/constant.js";
import mixins from "@/mixins/refresh";
import { getSevenDays, getRangeRandom } from "@/utils/tools";

// -----------------合规性 start---------------------------
var data = [
  {
    name: "安全评价",
    value: 0,
  },
  {
    name: "职业卫生评价",
    value: 0,
  },
  {
    name: "特种作业持证",
    value: 0,
  },
  {
    name: "特种设备报检率",
    value: 0,
  },
  {
    name: "消防验收",
    value: 0,
  },
];
var titleArr = [],
  seriesArr = [];
var sCenter,
  TitleXy = {};
var colors = [
  ["#46C97D", "#1b2d2f"],
  ["#DC8439", "#1b2d2f"],
  ["#18F8F9", "#1b2d2f"],
  ["#6885D9", "#1b2d2f"],
  ["#FFF189", "#1b2d2f"],
];
data.forEach(function (item, index) {
  if (index < 2) {
    sCenter = [index * 35 + 30 + "%", "20%"];
    TitleXy = {
      left: index * 35 + 30 + "%",
      top: "34%",
    };
  } else {
    sCenter = [(index - 2) * 30 + 20 + "%", "60%"];
    TitleXy = {
      left: (index - 2) * 30 + 20 + "%",
      top: "74%",
    };
  }
  titleArr.push({
    text: item.name,
    left: TitleXy.left,
    top: TitleXy.top,
    textAlign: "center",
    textStyle: {
      fontSize: nowSize(14),
      color: "#FFFFFF",
      textAlign: "center",
    },
  });
  seriesArr.push({
    name: item.name,
    type: "pie",
    clockWise: true,
    roundCap: true,
    barWidth: 60,
    radius: [34, 40],
    itemStyle: {
      normal: {
        color: colors[index][0],
        shadowColor: colors[index][0],
        shadowBlur: 0,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      },
    },
    hoverAnimation: false,
    center: sCenter,
    data: [
      {
        value: item.value,
        label: {
          normal: {
            formatter: function (params) {
              return params.value + "%";
            },
            position: "center",
            show: true,
            textStyle: {
              fontSize: nowSize(14),
              fontWeight: "bold",
              fontStyle: "italic",
              color: "#ffffff",
            },
          },
        },
      },
      {
        value: 100 - item.value,
        name: "invisible",
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: colors[index][1],
          },
          emphasis: {
            color: colors[index][1],
          },
        },
      },
    ],
  });
});

// -----------------合规性 end---------------------------

const offsetX = 8;
const offsetY = 3;
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    // 会canvas的应该都能看得懂，shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x - offsetX, shape.y - offsetY];
    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
    const c3 = [xAxisPoint[0], xAxisPoint[1]];
    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
  },
});

// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c1 = [shape.x, shape.y];
    const c2 = [xAxisPoint[0], xAxisPoint[1]];
    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
    const c4 = [shape.x + offsetX, shape.y - offsetY];
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
  },
});

// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
    const c3 = [shape.x, shape.y - offsetX];
    const c4 = [shape.x - offsetX, shape.y - offsetY];
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
  },
});
// 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);

export default {
  name: "index",
  components: {
    ConBox,
    BaseEcharts,
    TitleItem,
  },
  mixins: [mixins],
  props: {
    controlList: {
      type: Array,
      default() {
        return [1212, 4, 241, 12, 4];
      },
    },
  },
  data() {
    return {
      // fui
      // 废气处理指标符合率
      lampblackRate: 0,
      query: {
        factoryName: this.$route.query.factoryName,
      },
      // 安全运行天数
      runningDays: 0,
      hgProjectOptions: {
        title: titleArr,
        series: seriesArr,
      },
      safeOptions: {
        animation: true,
        tooltip: {
          ...TOOLTIP_COMMON,
          trigger: "axis",
        },
        legend: {
          show: true,
          right: "10%",
          icon: "rect",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 10,
          selectedMode: false, // 是否允许点击
          textStyle: {
            color: "#fefefe",
            fontSize: nowSize(12),
          },
        },
        grid: {
          left: "5%",
          top: "16%",
          bottom: "5%",
          right: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {},
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(110, 130, 149, 0.30)",
                width: 1,
              },
            },
            axisLabel: {
              textStyle: {
                color: "#adceea",
                fontSize: nowSize(14),
              },
            },
            interval: 1,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "%",
            max: 100,
            nameTextStyle: {
              color: "#A1A6AA",
              fontSize: nowSize(14),
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A1A6AA",
                fontSize: nowSize(14),
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],

        series: [
          {
            name: "整改率",
            type: "line",
            showAllSymbol: true,
            lineStyle: {
              color: "#4c6173",
            },
            showSymbol: true,
            symbol:
              "image://",
            symbolSize: 26,
            itemStyle: {
              normal: {
                color: "rgba(172, 213, 152, 1)",
                borderColor: "rgba(172, 213, 152, 1)",
                borderWidth: 1,
              },
            },
            data: [],
          },
        ],
      },
      sewagOptions: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          ...TOOLTIP_COMMON,
        },
        grid: {
          left: "5%",
          right: "5%",
          top: "10%",
          bottom: "6%",
          containLabel: true,
        },
        legend: {
          show: true,
          top: 0,
          right: "5%",
          itemWidth: 7,
          itemHeight: 4,
          itemGap: 30,
          textStyle: {
            color: "#fff",
            fontSize: nowSize(12),
          },
        },
        xAxis: {
          type: "category",
          data: [],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#6E8295",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: nowSize(14),
            color: "#bde1ff",
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#6E8295",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: nowSize(14),
            color: "#5e6369",
          },
        },
        series: [
          {
            name: "COD",
            type: "custom",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              const xAxisPoint = api.coord([api.value(0), 0]);
              const distance = 20;
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0] - distance,
                      y: location[1],
                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#19E2A7",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0] - distance,
                      y: location[1],
                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#19E2A7",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0] - distance,
                      y: location[1],
                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                    },
                    style: {
                      fill: "#46c97d",
                    },
                  },
                ],
              };
            },
            data: [],
          },
          {
            name: "氮",
            type: "custom",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#FFAB3F",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#FFAB3F",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: "#dc8439",
                    },
                  },
                ],
              };
            },
            data: [],
          },
          {
            name: "磷",
            type: "custom",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              const xAxisPoint = api.coord([api.value(0), 0]);
              const distance = 20;
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0] + distance,
                      y: location[1],
                      xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#2692FF",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0] + distance,
                      y: location[1],
                      xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#2692FF",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0] + distance,
                      y: location[1],
                      xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
                    },
                    style: {
                      fill: "#01a0f6",
                    },
                  },
                ],
              };
            },
            data: [],
          },
        ],
      },
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    // hui
    init() {
      this.getWorkday();
      this.safetyGas();
      this.safetyProject();
      this.safetyRectify();
      this.safetyDisposal();
    },

    /**
     * 纠违隐患及时整改率列表
     * @param name 描述信息
     */
    async safetyRectify() {
      const dates = getSevenDays();

      const data = [
        {
          createBy: null,
          createTime: "2023-09-14 19:43:29",
          updateBy: null,
          updateTime: null,
          remark: null,
          id: 8,
          factoryName: "杭州顶益工厂",
          workshopName: null,
          lineName: null,
          recordDate: dates[3],
          improveNum: "380",
          findNum: "448",
          yhNum: "272",
          rectifyRate: "82.91",
        },
        {
          createBy: null,
          createTime: "2023-10-19 16:09:00",
          updateBy: null,
          updateTime: "2023-10-19 23:53:01",
          remark: null,
          id: 33,
          factoryName: "杭州顶益工厂",
          workshopName: null,
          lineName: null,
          recordDate: dates[4],
          improveNum: "382",
          findNum: "450",
          yhNum: "289",
          rectifyRate: "83.01",
        },
        {
          createBy: null,
          createTime: "2023-10-20 14:01:00",
          updateBy: null,
          updateTime: "2023-10-20 14:05:01",
          remark: null,
          id: 34,
          factoryName: "杭州顶益工厂",
          workshopName: null,
          lineName: null,
          recordDate: dates[5],
          improveNum: "384",
          findNum: "452",
          yhNum: "270",
          rectifyRate: "83.29",
        },
        {
          createBy: null,
          createTime: "2023-10-21 20:29:52",
          updateBy: null,
          updateTime: "2023-10-21 20:29:52",
          remark: null,
          id: 35,
          factoryName: "杭州顶益工厂",
          workshopName: null,
          lineName: null,
          recordDate: dates[6],
          improveNum: "386",
          findNum: "454",
          yhNum: "269",
          rectifyRate: "84.90",
        },
      ];

      let x1 = data.map((item) => item.recordDate);
      this.safeOptions.xAxis[0].data = x1;
      this.safeOptions.series[0].data = data.map((item) => item.rectifyRate);
    },
    /**
     * 污水处理指标符合率列表
     * @param name 描述信息
     */
    async safetyDisposal() {
      const dates = getSevenDays();
      // 处理x轴数据
      this.sewagOptions.xAxis.data = dates;
      const cod = ["66.01", "66", "66.03", "66.02", "66.05", "66.04", "66.06"];
      const nitrogen = ["4.37", "4.35", "4.36", "4.41", "4.38", "4.39", "4.42"];
      const phosphorus = ["0.742", "0.74", "0.746", "0.744", "0.75", "0.748", "0.752"];
      // 处理y轴数据
      this.sewagOptions.series[0].data = cod;
      this.sewagOptions.series[1].data = phosphorus;
      this.sewagOptions.series[2].data = nitrogen;
      return;
      let { code, data } =
        (await safetyDisposal({ factoryName: this.query.factoryName }).catch((err) => {
          err;
        })) || {};
      if (code === 200) {
        const dates = getSevenDays();
        // 处理x轴数据
        this.sewagOptions.xAxis.data = dates;
        const cod = [66];
        const nitrogen = [4.35];
        const phosphorus = [0.74];
        for (let i = 0; i < 6; i++) {
          cod.push(cod[0] + getRangeRandom(-20, 20));
          nitrogen.push(nitrogen[0] + getRangeRandom(-2, 2));
          phosphorus.push(phosphorus[0] + getRangeRandom(-0.2, 0.2));
        }
        // 处理y轴数据
        this.sewagOptions.series[0].data = cod;
        this.sewagOptions.series[1].data = phosphorus;
        this.sewagOptions.series[2].data = nitrogen.map((item) => item.toFixed(2));
      }
    },
    /**
     * 合规性项目符合率
     * @param name 描述信息
     */
    async safetyProject() {
      let { code, data } =
        (await safetyProject({ factoryName: this.query.factoryName }).catch((err) => {
          err;
        })) || {};
      let arr = [
        "safetyEvaluationRate",
        "careerHealthRate",
        "specialOperationRate",
        "specialInspectionRate",
        "fireAcceptanceRate",
        "watchPercent",
      ];
      if (code === 200) {
        this.hgProjectOptions.series.forEach((item, index) => {
          item.data[0].value = data[arr[index]] || 0;
          item.data[1].value = 100 - data[arr[index]];
        });
      }
    },
    /**
     * 废气处理指标符合率
     * @param name 描述信息
     */
    async safetyGas() {
      this.lampblackRate = 1737;
      return;
      let { code, data } =
        (await safetyGas({ factoryName: this.query.factoryName }).catch((err) => {
          err;
        })) || {};
      if (code === 200) {
        // this.lampblackRate = data.lampblackRate || 0;
      }
    },

    /**
     * 获取工作日
     * @param name 描述信息
     */
    async getWorkday() {
      this.runningDays = new Date().getDate() + 2;
      return;

      let { code, data } =
        (await getWorkday({
          factoryName: this.query.factoryName,
        }).catch((err) => {
          err;
        })) || {};
      if (code === 200) {
        // this.runningDays = data.runningDays || 0;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.exhaust-gas-treatment-con {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 50px auto 0;
  width: 150px;
  height: 150px;

  // background-image: url("~@/assets/images/aqsc_icon_fqclzb.png");
  // background-size: 100%;
  img {
    position: absolute;
    z-index: 0;
    width: 100%;
  }

  .value {
    position: relative;
    z-index: 999;
    margin-bottom: 12px;
    font-size: 36px;
    color: #fff;
    font-weight: 700;
    font-family: "MicrosoftYaHei-Bold";
  }

  .unit {
    position: relative;
    font-size: 14px;
    font-family: Microsoft YaHei;
    color: #ffffff;
    opacity: 0.53;
  }
}

.bg-item {
  background: url("~@/assets/images/aqsc_icon_scts.png") no-repeat;
  background-size: 100% 100%;
}

.font-num {
  font-weight: bold;
  font-style: italic;
  background-image: -webkit-linear-gradient(top, #fff, #70a3ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
